<template>
	<view class="content">
		<button class="share-btn" @tap="openShareBox">分享</button>
		<!-- 分享弹窗-->
		
		<view class="share-box" >
			<view class="share-box-mask" v-if="shareBoxFlag"></view>
			<view class="share-box-dialog" :class="shareBoxFlag ? 'share-box-open':'share-box-close'" >
				<view class="close-btn" @tap="closeShareBox">
					<tui-icon name="shut" :size="20" color="#000"></tui-icon>
				</view>
				<view class="share-box-title">分享</view>
				<view class="share-box-body">
					<view class="share-item" @tap="doCreateCanvasImage">
						<tui-icon name="wechat" :size="40" color="#40AD3E"></tui-icon>
						<view >分享给好友</view>
					</view>
					<view class="share-item" @tap="doCreateCanvasImage">
						<tui-icon name="picture" :size="30" color="#FE5E33"></tui-icon>
						<view>生成分享图片</view>
					</view>
				</view>
			</view>
		</view>
		
		<view :hidden="canvasFlag" class="canvasWrap"><!-- 海报 要放外面放组件里面 会找不到 canvas-->
			<canvas class="canvas" canvas-id="myCanvas"  @tap="saveCanvasImage"></canvas><!-- 海报 -->
		</view>
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	export default {
		components:{
			footerMenu,
			tuiIcon,
			tuiButton,

		},
		data() {
			return {
				shareBoxFlag: false,
				canvasFlag: true,
				posterData:{
					imgBg: 'http://wz.syrcj.com/assets/ynly/goods-share/bg.png',
					imgLogo:'http://wz.syrcj.com/ueditor/image/201912/23102227960666.jpg',//商品主图
					titleOne:"诗酒茶系列武夷大红袍年花香型中火",//标题1
					titleTwo:"一级 体验装 16g",		//标题2
					textMoney:"￥: 1888",			//商品价格
					textLikeCnt:"288人喜欢",			//XX人喜欢
					imgCode:'http://wz.syrcj.com/runtime/goods_share/qr_23_5456.png',//小程序码
				}
			}
		},
		
		methods: {
			doCreateCanvasImage(){
				// 这个是固定写死的小程序码
				this.$forceUpdate();//强制渲染数据
				setTimeout(()=>{
					this.canvasFlag=false;//显示canvas海报
					this.boxFlag = false;//关闭分享弹窗
					this.$refs.dodoPoster.createCanvasImage();//调用子组件的方法
				},1000)
				// 这个是固定写死的小程序码 end
			},
			
			
			// 分享弹窗
			openShareBox() {
				this.shareBoxFlag = true;
			},
			
			// 关闭分享弹窗
			closeShareBox() {
				this.shareBoxFlag = false;
			},
			// 取消海报
			canvasCancel(val){
				this.canvasFlag=val;
			},
			
			// 保存到系统相册
			saveCanvasImage(){
				console.log('点击了保存')
				wx.showLoading({
					title: '保存中...'
				})
				let _this = this;
				// 1-把画布转化成临时文件
				uni.canvasToTempFilePath({
				x: 50,
				y: 40,
				width:(this.phoneW-100),    // 画布的宽
				height: (this.phoneH-120),   // 画布的高
				destWidth: (this.phoneW-100)*5,
				destHeight: (this.phoneH-120)*5,
				canvasId: 'myCanvas',
				success(res) {
					// 2-保存图片至相册
					uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success(res2) {
						wx.hideLoading();
						uni.showToast({title: '图片保存成功，可以去分享啦~', duration: 2000})
					},
					fail() {
						uni.showToast({title: '保存失败，稍后再试', duration: 2000,icon:'none'})
						wx.hideLoading();
					}
					})
				},
				fail() {
					uni.showToast({title: '保存失败，稍后再试',duration: 2000,icon:'none'})
					wx.hideLoading();
				}
				})
			},
			
		},
		
		// #ifdef MP-WEIXIN
		onShareAppMessage: function(res) {
			if(res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			var _self = this;
			var openid = uni.getStorageSync('_openid');
			var token = uni.getStorageSync('_token');
			uni.request({
				url: _self._apiurl + "/app/goods/sharegoods",
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					openid: openid,
					token: token,
					goods_id: _self.goodsid
				},
				success: (res) => {
					console.log(res);
					_self._isplogin(res, function() {
						var data = res.data.data;
					})
				}
			});
			return {
				title: "清仓处理 " + _self.name + " " + _self.brand + " " + _self.price + "元",
				path: '/pages/class/class?goods_id=' + _self.goodsid + "&fuser_id=" + _self.myuser_id,
				imageUrl: _self.imgone
			}
		},
		//#endif
		
	

		//页面加载的时候
		onLoad: function(options) {
			
		},
	
	}
</script>

<style lang="scss">


	.share-btn{
		padding: 30upx 60upx;background-color:#007AFF;color: #19BE6B;
	}
	
	/****商品分享Canvas生成分享图片**/
	.share-box{display: flex;align-items: center;justify-content: flex-end;flex-direction: column;z-index: 105;line-height: 1;box-sizing: border-box;}
	.share-box-mask{width: 100%;height: 100%;position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.5);}
	.share-box-dialog {width: 750rpx;height: 310rpx;overflow: hidden;background-color: #fff;border-radius: 24rpx 24rpx 0px 0px;position: relative;box-sizing: border-box; position: fixed;bottom: 0;}
	.close-btn {padding: 20rpx 15rpx;position: absolute;top: 0rpx;right: 29rpx;}
	.share-box-title {font-size: 28rpx;color: #1c1c1c;padding: 28rpx 41rpx;background-color: #f7f7f7;}
	.share-box-body{display: flex;flex-direction: row;justify-content:space-around;font-size: 28rpx;color: #1c1c1c;}
	.share-item{display: flex;flex-direction:column;justify-content: center;justify-content:space-around;line-height: 40px;padding-top: 30px;text-align: center;}
	.share-box-open {transition: all 0.3s ease-out; transform: translateY(0);}
	.share-box-close {transition: all 0.3s ease-out; transform: translateY(310rpx);}
	.canvasWrap{margin: 0 auto;}
	.canvas{position: fixed !important;display: block !important;width: 300px;height: 530px;z-index: 300;left:80rpx !important;top: 80rpx !important;text-align: center;}
	
</style>